<template>
  <div class="music-player" :class="{ hidden: !currentMusic }">
    <div class="player-container">
      <!-- 左侧：封面和歌曲信息 -->
      <div class="player-left">
        <div class="current-song" v-if="currentMusic">
          <img
            :src="
              currentMusic.coverUrl ||
              'https://sky-take-ou7.oss-cn-beijing.aliyuncs.com/default.jpeg'
            "
            alt="{{ currentMusic.title }}"
            @click="gotoMusicDetail"
            class="album-cover"
          />
          <div class="song-info">
            <h3 class="song-title" @click="gotoMusicDetail">{{ currentMusic.title }}</h3>
            <p class="song-artist">{{ currentMusic.artist }}</p>
            <p class="song-creator" v-if="currentMusic.creatorName">
              上传者:
              <template
                v-if="currentMusic.creatorNicknames && currentMusic.creatorNicknames.length > 1"
              >
                <span
                  v-for="(nickname, index) in currentMusic.creatorNicknames"
                  :key="index"
                  class="creator-link"
                  @click="gotoUserDetail(getCreatorIdByIndex(index))"
                >
                  {{ nickname
                  }}<template v-if="index < currentMusic.creatorNicknames.length - 1">、</template>
                </span>
              </template>
              <template v-else-if="currentMusic.creatorNickname">
                <span class="creator-link" @click="gotoUserDetail(getFirstCreatorId())">
                  {{ currentMusic.creatorNickname }}
                </span>
              </template>
              <template v-else>
                <span class="creator-link" @click="gotoUserDetail(getFirstCreatorId())">
                  {{ formatCreatorName(currentMusic.creatorName) }}
                </span>
              </template>
            </p>
          </div>
        </div>
        <div class="no-song" v-else>
          <p class="placeholder-text">暂无播放内容</p>
        </div>
      </div>

      <!-- 中间：播放器控件 -->
      <div class="player-center">
        <div class="player-controls">
          <button class="control-btn" @click="prevSong" aria-label="上一首">
            <img src="/src/assets/icon/skip-back.svg" alt="上一首" class="icon" />
          </button>
          <button class="control-btn play-btn" @click="togglePlay" aria-label="播放/暂停">
            <img v-if="isPlaying" src="/src/assets/icon/pause_2.svg" alt="暂停" class="icon" />
            <img v-else src="/src/assets/icon/play_2.svg" alt="播放" class="icon" />
          </button>
          <button class="control-btn" @click="nextSong" aria-label="下一首">
            <img src="/src/assets/icon/skip-forward.svg" alt="下一首" class="icon" />
          </button>
        </div>
        <div class="player-progress">
          <span class="time-current">{{ formatTime(currentTime) }}</span>
          <div
            class="final-progress-container"
            ref="sliderRef"
            @click="onFinalSliderClick"
            @mousedown="onFinalDragStart"
          >
            <div class="final-progress-bar" :style="{ width: progress + '%' }"></div>
          </div>
          <span class="time-total">{{ formatTime(duration) }}</span>
        </div>
      </div>

      <!-- 右侧：音量控制和播放列表按钮 -->
      <div class="player-right">
        <!-- 音量控制 -->
        <div class="volume-control" @mouseenter="showVolume()" @mouseleave="hideVolume()">
          <button class="volume-btn" @click="toggleMute" aria-label="静音">
            <img
              v-if="isMuted || volume === 0"
              src="/src/assets/icon/volume-x.svg"
              alt="静音"
              class="icon"
            />
            <img
              v-else-if="volume < 0.5"
              src="/src/assets/icon/volume-1.svg"
              alt="低音量"
              class="icon"
            />
            <img v-else src="/src/assets/icon/volume-2.svg" alt="高音量" class="icon" />
          </button>
          <div class="volume-slider" v-if="showVolumeSlider">
            <div
              class="custom-slider"
              @click="onVolumeSliderClick"
              @mousedown="onVolumeSliderMouseDown"
              ref="volumeSliderRef"
            >
              <div
                class="slider-track"
                :style="{ height: volume * 100 + '%', bottom: 0, position: 'absolute' }"
              ></div>
            </div>
          </div>
        </div>

        <!-- 播放列表开关按钮 -->
        <button class="playlist-toggle-btn" @click="togglePlaylist($event)" aria-label="播放列表">
          <img src="/src/assets/icon/music.svg" alt="播放列表" class="icon" />
        </button>
      </div>
    </div>
  </div>

  <!-- 播放列表遮罩层 -->
  <transition name="fade">
    <div v-if="showPlaylist" class="playlist-overlay" @click="closePlaylist($event)"></div>
  </transition>

  <!-- 右侧滑入播放列表 -->
  <transition name="playlist-slide">
    <div v-if="showPlaylist" class="playlist-container">
      <div class="playlist-popup" @click.stop>
        <div class="playlist-popup-header">
          <h4>播放列表 ({{ playlist.length }})</h4>
          <button class="clear-btn" @click="clearPlaylist" v-if="playlist.length > 0">
            <span class="clear-icon">🗑️</span>
            清空列表
          </button>
        </div>
        <div class="playlist-popup-content">
          <div v-if="playlist.length === 0" class="empty-playlist">
            <div class="empty-icon">🎵</div>
            <p>播放列表为空</p>
            <small>点击音乐开始播放吧</small>
          </div>
          <ul v-else class="playlist-list">
            <li
              v-for="(item, index) in playlist"
              :key="item.id"
              :class="{ active: index === currentIndex }"
              class="playlist-item-modern"
            >
              <div class="item-left">
                <div class="item-number" v-if="index !== currentIndex">
                  {{ index + 1 }}
                </div>
                <div v-else class="playing-wave">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>

              <div class="item-content" @click="playMusic(item)">
                <div class="item-cover">
                  <img
                    :src="item.coverUrl || item.cover || '/src/assets/icon/music.svg'"
                    :alt="item.title"
                    @error="$event.target.src = '/src/assets/icon/music.svg'"
                  />
                </div>

                <div class="item-info">
                  <h4 class="item-title">{{ item.title }}</h4>
                  <p class="item-artist">{{ item.artist }}</p>
                  <div class="item-creators" v-if="item.creatorName">
                    <span class="creator-badge">创作者</span>
                    <template v-if="item.creatorNicknames && item.creatorNicknames.length > 1">
                      <span
                        v-for="(nickname, idx) in item.creatorNicknames"
                        :key="idx"
                        class="creator-name"
                        @click.stop="gotoUserDetail(getPlaylistCreatorId(item, idx))"
                      >
                        {{ nickname
                        }}<template v-if="idx < item.creatorNicknames.length - 1">,</template>
                      </span>
                    </template>
                    <template v-else-if="item.creatorNickname">
                      <span
                        class="creator-name"
                        @click.stop="gotoUserDetail(getPlaylistCreatorId(item))"
                      >
                        {{ item.creatorNickname }}
                      </span>
                    </template>
                    <template v-else>
                      <span
                        class="creator-name"
                        @click.stop="gotoUserDetail(getPlaylistCreatorId(item))"
                      >
                        {{ formatCreatorName(item.creatorName) }}
                      </span>
                    </template>
                  </div>
                </div>
              </div>

              <div class="item-actions">
                <button
                  class="remove-btn-modern"
                  @click.stop="removeFromPlaylist(index)"
                  title="移除"
                  aria-label="从播放列表移除"
                >
                  ✕
                </button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const audioRef = ref(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const progress = ref(0)
const volume = ref(0.7)
const isMuted = ref(false)
const currentMusic = ref(null)
const playlist = ref([])
const currentIndex = ref(-1)
const showPlaylist = ref(false)
const showVolumeSlider = ref(false)
const volumeSliderRef = ref(null)

let volumeSliderTimeout = null

const router = useRouter()

// 显示音量滑块
const showVolume = () => {
  if (volumeSliderTimeout) clearTimeout(volumeSliderTimeout)
  showVolumeSlider.value = true
}

// 隐藏音量滑块
const hideVolume = () => {
  volumeSliderTimeout = setTimeout(() => {
    showVolumeSlider.value = false
  }, 500)
}

// 切换静音
const previousVolume = ref(0.7) // 存储静音前的音量，默认0.7

const toggleMute = () => {
  if (isMuted.value) {
    // 取消静音，恢复之前的音量
    audioRef.value.muted = false
    isMuted.value = false
    volume.value = previousVolume.value
  } else {
    // 静音，记录当前音量
    previousVolume.value = volume.value
    audioRef.value.muted = true
    isMuted.value = true
    volume.value = 0 // 静音时将音量显示为0
  }
}

// 格式化时间
const formatTime = (time) => {
  if (!time || isNaN(time)) return '00:00'
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}

// 播放/暂停切换
const togglePlay = () => {
  if (!audioRef.value) return
  if (isPlaying.value) {
    audioRef.value.pause()
  } else {
    audioRef.value.play()
  }
}

// 创建音频元素
onMounted(() => {
  audioRef.value = new Audio()
  audioRef.value.volume = volume.value

  // 监听音频事件
  audioRef.value.addEventListener('play', onAudioPlay)
  audioRef.value.addEventListener('pause', onAudioPause)
  audioRef.value.addEventListener('timeupdate', onAudioTimeUpdate)
  audioRef.value.addEventListener('loadedmetadata', onAudioLoadedMetadata)
  audioRef.value.addEventListener('ended', onAudioEnded)
})

// 播放当前音乐
const playCurrentMusic = () => {
  if (!currentMusic.value || !audioRef.value) return

  // 获取音频URL，支持多种字段名
  const audioUrl =
    currentMusic.value.musicUrl || currentMusic.value.url || currentMusic.value.fileUrl
  if (!audioUrl) {
    console.error('音乐URL为空:', currentMusic.value)
    ElMessage.error('无法播放：音乐文件URL为空')
    return
  }

  console.log('开始播放音乐:', currentMusic.value.title, 'URL:', audioUrl)

  audioRef.value.src = audioUrl
  audioRef.value.load()
  audioRef.value.volume = volume.value

  audioRef.value
    .play()
    .then(() => {
      console.log('音乐播放成功:', currentMusic.value.title)
    })
    .catch((error) => {
      console.error('音乐播放失败:', error)
      ElMessage.error('播放失败: ' + (error.message || '未知错误'))
    })
}

// 上一首
const prevSong = () => {
  if (playlist.value.length === 0) return
  currentIndex.value = (currentIndex.value - 1 + playlist.value.length) % playlist.value.length
  currentMusic.value = playlist.value[currentIndex.value]
  playCurrentMusic()
}

// 下一首
const nextSong = () => {
  if (playlist.value.length === 0) return
  currentIndex.value = (currentIndex.value + 1) % playlist.value.length
  currentMusic.value = playlist.value[currentIndex.value]
  playCurrentMusic()
}

// 跳转到音乐详情页
const gotoMusicDetail = () => {
  if (currentMusic.value) {
    router.push(`/music/${currentMusic.value.id}`)
  }
}

// 获取第一个上传者ID
const getFirstCreatorId = () => {
  if (!currentMusic.value || !currentMusic.value.creatorIds) return null
  const ids = currentMusic.value.creatorIds
    .split('-')
    .map((id) => parseInt(id.trim()))
    .filter((id) => !isNaN(id))
  return ids.length > 0 ? ids[0] : null
}

// 根据索引获取对应的上传者ID
const getCreatorIdByIndex = (index) => {
  if (!currentMusic.value || !currentMusic.value.creatorIds) return null
  const ids = currentMusic.value.creatorIds
    .split('-')
    .map((id) => parseInt(id.trim()))
    .filter((id) => !isNaN(id))
  return ids[index] || null
}

// 获取播放列表项的上传者ID
const getPlaylistCreatorId = (item, index = 0) => {
  if (!item || !item.creatorIds) return null
  const ids = item.creatorIds
    .split('-')
    .map((id) => parseInt(id.trim()))
    .filter((id) => !isNaN(id))
  return ids[index] || ids[0] || null
}

// 格式化创作者名称（处理数组或字符串格式）
const formatCreatorName = (creatorName) => {
  if (!creatorName) return '未知用户'
  if (Array.isArray(creatorName)) {
    return creatorName.join('、')
  }
  // 处理可能是ID的情况
  if (typeof creatorName === 'string' && /^\d+$/.test(creatorName)) {
    return '用户' + creatorName
  }
  return String(creatorName)
}

// 跳转到用户详情页
const gotoUserDetail = (userId) => {
  if (userId) {
    router.push(`/profile/${userId}`)
  }
}

// 切换播放列表显示
const togglePlaylist = (event) => {
  if (event) {
    event.stopPropagation()
  }
  showPlaylist.value = !showPlaylist.value
}

// 关闭播放列表
const closePlaylist = (event) => {
  if (event) {
    event.stopPropagation()
  }
  showPlaylist.value = false
}

// 清空播放列表
const clearPlaylist = () => {
  playlist.value = []
  currentIndex.value = -1
  currentMusic.value = null
  if (audioRef.value) {
    audioRef.value.pause()
    isPlaying.value = false
  }
  ElMessage.success('播放列表已清空')
}

// 播放指定音乐 - 追加到播放列表底部并开始播放
const playMusic = (music) => {
  const index = playlist.value.findIndex((item) => item.id === music.id)
  if (index !== -1) {
    // 如果已存在，直接播放该音乐
    currentIndex.value = index
    currentMusic.value = playlist.value[index]
    playCurrentMusic()
  } else {
    // 追加到播放列表底部
    playlist.value.push(music)
    currentIndex.value = playlist.value.length - 1
    currentMusic.value = music
    playCurrentMusic()
  }
}

// 进度条点击事件
const onFinalSliderClick = (e) => {
  if (!audioRef.value || !duration.value) return
  const sliderRect = e.currentTarget.getBoundingClientRect()
  const clickPosition = e.clientX - sliderRect.left
  const percent = clickPosition / sliderRect.width
  const newTime = percent * duration.value
  audioRef.value.currentTime = newTime
}

// 调整音量
const onVolumeChange = (value) => {
  volume.value = value
  audioRef.value.volume = value
  isMuted.value = audioRef.value.muted
}

// 音量滑块点击事件
const onVolumeSliderClick = (e) => {
  showVolume() // 点击时显示滑块
  const sliderRect = volumeSliderRef.value.getBoundingClientRect()
  const clickPosition = sliderRect.bottom - e.clientY
  const percent = (clickPosition / sliderRect.height) * 100
  const clampedPercent = Math.max(0, Math.min(100, percent))
  const newVolume = clampedPercent / 100
  onVolumeChange(newVolume)
  // hideVolume() // 点击后延迟隐藏
}

// 音量滑块拖动开始
const onVolumeSliderMouseDown = (e) => {
  e.stopPropagation()
  showVolume() // 确保拖动时滑块显示

  const onMouseMove = (moveEvent) => {
    const sliderRect = volumeSliderRef.value.getBoundingClientRect()
    let mousePosition = sliderRect.bottom - moveEvent.clientY
    mousePosition = Math.max(0, Math.min(sliderRect.height, mousePosition))
    const percent = (mousePosition / sliderRect.height) * 100
    const newVolume = percent / 100
    onVolumeChange(newVolume)
  }

  const onMouseUp = () => {
    hideVolume() // 拖动结束后延迟隐藏
    window.removeEventListener('mousemove', onMouseMove)
    window.removeEventListener('mouseup', onMouseUp)
  }
  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('mouseup', onMouseUp)
}

// 进度条拖动
const onFinalDragStart = (e) => {
  e.preventDefault()
  const sliderRect = e.currentTarget.getBoundingClientRect()

  const onMouseMove = (moveEvent) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const x = moveEvent.clientX - rect.left
    const percent = Math.max(0, Math.min(100, (x / rect.width) * 100))
    progress.value = percent
    if (audioRef.value && duration.value) {
      audioRef.value.currentTime = (percent / 100) * duration.value
    }
  }

  const onMouseUp = () => {
    window.removeEventListener('mousemove', onMouseMove)
    window.removeEventListener('mouseup', onMouseUp)
  }

  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('mouseup', onMouseUp)
}

// 音频事件处理
const onAudioPlay = () => {
  isPlaying.value = true
}

const onAudioPause = () => {
  isPlaying.value = false
}

const onAudioTimeUpdate = () => {
  if (!audioRef.value) return
  currentTime.value = audioRef.value.currentTime
  progress.value = duration.value ? (currentTime.value / duration.value) * 100 : 0
}

const onAudioLoadedMetadata = () => {
  if (!audioRef.value) return
  duration.value = audioRef.value.duration
}

const onAudioEnded = () => {
  nextSong()
}

// 生命周期
onMounted(() => {
  // 创建音频实例
  audioRef.value = new Audio()
  audioRef.value.volume = volume.value

  // 添加事件监听器
  audioRef.value.addEventListener('play', onAudioPlay)
  audioRef.value.addEventListener('pause', onAudioPause)
  audioRef.value.addEventListener('timeupdate', onAudioTimeUpdate)
  audioRef.value.addEventListener('loadedmetadata', onAudioLoadedMetadata)
  audioRef.value.addEventListener('ended', onAudioEnded)

  console.log('音频播放器初始化完成')
})

onBeforeUnmount(() => {
  if (audioRef.value) {
    audioRef.value.removeEventListener('play', onAudioPlay)
    audioRef.value.removeEventListener('pause', onAudioPause)
    audioRef.value.removeEventListener('timeupdate', onAudioTimeUpdate)
    audioRef.value.removeEventListener('loadedmetadata', onAudioLoadedMetadata)
    audioRef.value.removeEventListener('ended', onAudioEnded)
    audioRef.value.pause()
    audioRef.value = null
  }
})

// 检查播放列表是否包含某首音乐
const isInPlaylist = (musicId) => {
  return playlist.value.some((item) => item.id === musicId)
}

// 从播放列表中移除某首音乐
const removeFromPlaylist = (index) => {
  if (index < 0 || index >= playlist.value.length) return

  const removedMusic = playlist.value[index]
  playlist.value.splice(index, 1)

  // 如果移除的是当前播放的音乐
  if (index === currentIndex.value) {
    if (playlist.value.length === 0) {
      // 播放列表为空，停止播放
      currentMusic.value = null
      currentIndex.value = -1
      if (audioRef.value) {
        audioRef.value.pause()
        audioRef.value.src = ''
      }
      isPlaying.value = false
    } else if (currentIndex.value >= playlist.value.length) {
      // 调整当前索引
      currentIndex.value = playlist.value.length - 1
      currentMusic.value = playlist.value[currentIndex.value]
      playCurrentMusic()
    } else {
      // 继续播放当前索引的音乐
      currentMusic.value = playlist.value[currentIndex.value]
      playCurrentMusic()
    }
  } else if (index < currentIndex.value) {
    // 如果移除的是当前播放之前的音乐，调整当前索引
    currentIndex.value--
  }
}
const playMusicExclusive = (music) => {
  playlist.value = [music]
  currentIndex.value = 0
  currentMusic.value = music
  playCurrentMusic()
}
const methods = {
  setPlaylist(list, index = 0) {
    // 使用深拷贝避免引用共享问题
    playlist.value = [...list]
    currentIndex.value = index
    currentMusic.value = playlist.value[index]
    playCurrentMusic()
  },
  playMusic(music) {
    const index = playlist.value.findIndex((item) => item.id === music.id)
    if (index !== -1) {
      // 如果已存在，直接播放该音乐
      currentIndex.value = index
      currentMusic.value = playlist.value[index]
      playCurrentMusic()
    } else {
      // 追加到播放列表底部
      playlist.value.push(music)
      currentIndex.value = playlist.value.length - 1
      currentMusic.value = music
      playCurrentMusic()
    }
  },
}

defineExpose({
  setPlaylist: methods.setPlaylist,
  playMusic: methods.playMusic,
  playMusicExclusive,
  isInPlaylist,
  removeFromPlaylist,
})
</script>

<style scoped>
.music-player {
  background-color: var(--card-background);
  border-top: 1px solid var(--border-color);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  height: 90px;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.music-player.hidden {
  transform: translateY(100%);
  pointer-events: none;
  opacity: 0;
}

.player-container {
  display: flex;
  height: 100%;
  padding: 0 1rem;
  align-items: center;
}

/* 左侧：封面和歌曲信息 */
.player-left {
  position: absolute;
  left: 1rem;
  min-width: 200px;
  max-width: 350px;
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
}

.current-song {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.no-song {
  display: flex;
  align-items: center;
  width: 100%;
}

.placeholder-text {
  color: #999;
  font-size: 0.9rem;
  margin: 0;
}

.album-cover {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.album-cover:hover {
  transform: scale(1.05);
}

.song-info {
  overflow: hidden;
}

.song-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.2s ease;
}

.song-title:hover {
  color: var(--primary-color);
}

.song-artist {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-creator {
  font-size: 0.75rem;
  color: #999;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-link {
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.creator-link:hover {
  color: var(--primary-dark);
  text-decoration: none;
  transform: translateY(-1px);
  font-weight: 500;
}

.creator-link-small {
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.creator-link-small:hover {
  color: var(--primary-dark);
  text-decoration: none;
  transform: translateY(-1px);
  font-weight: 500;
}

/* 中间：播放器控件 */
.player-center {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 0;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.5rem;
}

.control-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.control-btn:hover {
  color: var(--primary-color);
  background-color: rgba(29, 185, 84, 0.05);
}

.play-btn {
  font-size: 1.5rem;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(29, 185, 84, 0.3);
}

.play-btn:hover {
  background-color: var(--primary-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(29, 185, 84, 0.4);
}

.player-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 600px;
}

.final-progress-container {
  flex: 1;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.final-progress-bar {
  height: 100%;
  background-color: #1db954 !important;
  border-radius: 3px;
  transition: width 0.1s ease;
}

.final-progress-container:active .final-progress-bar {
  background-color: #1aa34a !important;
}

.time-current,
.time-total {
  font-size: 0.8rem;
  color: #666;
  width: 40px;
  text-align: center;
}

/* 右侧：音量控制和播放列表按钮 */
.player-right {
  position: absolute;
  right: 1rem;
  min-width: 120px;
  max-width: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  padding: 0.8rem 0;
}

/* 音量控制 */
.volume-control {
  position: relative;
  display: flex;
  align-items: center;
  height: 120px;
}

.volume-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.volume-btn:hover {
  color: var(--primary-color);
  background-color: rgba(29, 185, 84, 0.05);
}

.volume-slider {
  position: absolute;
  left: 5px;
  top: -40px;
  /* transform: translateY(-50%); */
  width: 40px;
  height: 80px;
  padding: 0.5rem;
  background-color: var(--card-background);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volume-control .custom-slider {
  width: 20px;
  height: 100%;
  position: relative;
  background-color: #e0e0e0;
  border-radius: 2px;
}

.volume-control .slider-track {
  left: 0;
  width: 100%;
  background-color: #1db954;
  border-radius: 2px;
  transition: height 0.1s ease !important;
}

.volume-control .slider-thumb {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: white;
  border: 2px solid #1db954;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider {
  animation: fadeIn 0.2s ease;
}

.playlist-toggle-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.playlist-toggle-btn:hover {
  color: var(--primary-color);
  background-color: rgba(29, 185, 84, 0.05);
}

/* 播放列表遮罩层 - 移除冲突的样式 */
.playlist-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 999;
}

/* 播放列表容器 - 移除冲突的样式 */
.playlist-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
}

/* 遮罩层淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

/* 播放列表滑入动画 */
.playlist-slide-enter-active,
.playlist-slide-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.playlist-slide-enter-from {
  transform: translateX(100%);
}

.playlist-slide-enter-to {
  transform: translateX(0);
}

.playlist-slide-leave-from {
  transform: translateX(0);
}

.playlist-slide-leave-to {
  transform: translateX(100%);
}

.playlist-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.playlist-popup-header h4 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.clear-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 20px;
  color: #ff3b30;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background: rgba(255, 59, 48, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.clear-icon {
  font-size: 16px;
}

.playlist-popup-content {
  height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

.empty-playlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-playlist p {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.8);
}

.empty-playlist small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.playlist-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist-item-modern {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.playlist-item-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

.playlist-item-modern.active {
  background: rgba(30, 215, 96, 0.1);
  border-left: 3px solid #1ed760;
}

.playlist-item-modern.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(90deg, #1ed760, #1fdf64);
}

.item-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  margin-right: 12px;
  flex-shrink: 0;
}

.item-number {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.playing-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}

.playing-wave span {
  width: 2px;
  height: 100%;
  background: #1ed760;
  border-radius: 1px;
  animation: wave 1.2s ease-in-out infinite;
}

.playing-wave span:nth-child(2) {
  animation-delay: -1.1s;
}

.playing-wave span:nth-child(3) {
  animation-delay: -1s;
}

@keyframes wave {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

.item-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.item-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.playlist-item-modern:hover .item-cover {
  transform: scale(1.05);
}

.item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.item-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-item-modern.active .item-title {
  color: #1ed760;
}

.item-artist {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-creators {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.creator-badge {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.creator-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.creator-name:hover {
  color: #1ed760;
  text-decoration: underline;
}

.item-actions {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.playlist-item-modern:hover .item-actions,
.playlist-item-modern.active .item-actions {
  opacity: 1;
}

.remove-btn-modern {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 59, 48, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
}

.remove-btn-modern:hover {
  background: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
  transform: scale(1.1);
}

.remove-btn-modern:active {
  transform: scale(0.9);
}

/* 滚动条样式 */
.playlist-popup-content::-webkit-scrollbar {
  width: 6px;
}

.playlist-popup-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.playlist-popup-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.playlist-popup-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .playlist-popup {
    width: 100%;
  }

  .item-content {
    padding: 8px 16px;
  }

  .item-cover {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .item-title {
    font-size: 14px;
  }

  .item-artist {
    font-size: 12px;
  }
}

/* 移动端播放器整体适配 */
@media (max-width: 768px) {
  .music-player {
    height: 70px;
  }

  .player-container {
    padding: 0 0.5rem;
  }

  .player-left {
    left: 0.5rem;
    min-width: 150px;
    max-width: 200px;
    padding: 0.5rem 0;
  }

  .album-cover {
    width: 45px;
    height: 45px;
  }

  .song-info {
    max-width: 120px;
  }

  .song-title {
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
  }

  .song-artist {
    font-size: 0.75rem;
  }

  .song-creator {
    display: none;
  }

  .player-center {
    max-width: 300px;
    padding: 0.5rem 0;
  }

  .player-controls {
    gap: 0.8rem;
    margin-bottom: 0.3rem;
  }

  .control-btn {
    width: 25px;
    height: 25px;
  }

  .icon {
    width: 18px;
    height: 18px;
  }

  .play-btn {
    font-size: 1.2rem;
    width: 35px;
    height: 35px;
  }

  .player-progress {
    gap: 0.3rem;
  }

  .time-current,
  .time-total {
    font-size: 0.7rem;
    width: 35px;
  }

  .player-right {
    right: 0.5rem;
    min-width: 80px;
    max-width: 120px;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .volume-control {
    display: none;
  }

  .playlist-btn {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .music-player {
    height: 65px;
  }

  .player-left {
    min-width: 120px;
    max-width: 150px;
  }

  .album-cover {
    width: 40px;
    height: 40px;
  }

  .song-info {
    max-width: 100px;
  }

  .song-title {
    font-size: 0.8rem;
  }

  .song-artist {
    font-size: 0.7rem;
  }

  .player-center {
    max-width: 200px;
  }

  .player-controls {
    gap: 0.6rem;
  }

  .control-btn {
    width: 22px;
    height: 22px;
  }



  .play-btn {
    font-size: 1rem;
    width: 32px;
    height: 32px;
  }

  .time-current,
  .time-total {
    font-size: 0.65rem;
    width: 30px;
  }

  .player-right {
    min-width: 60px;
    max-width: 80px;
    gap: 0.3rem;
  }

  .playlist-btn {
    width: 28px;
    height: 28px;
  }

  .playlist-modal {
    width: 95%;
    max-height: 70vh;
    margin: 1rem;
  }

  .playlist-header {
    padding: 1rem 1.5rem;
  }

  .playlist-content {
    max-height: calc(70vh - 120px);
  }

  .playlist-item {
    padding: 0.6rem 1.5rem;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .music-player {
    height: 60px;
  }

  .player-left,
  .player-right {
    padding: 0.3rem 0;
  }

  .player-center {
    padding: 0.3rem 0;
  }
}
</style>
